---
import EmailSignup from './Subscribe/EmailSignup.astro'
import dayjs from "dayjs";
import { marked } from 'marked';
import Demo from './demo.astro'

export interface Props {
  title: string;
  date: string;
  hero: string;
  views: Int16Array
  author: String
  content: String
}

const { title, date, hero, views, author, content} = Astro.props;

const contentView = marked.parse(content.toString());
---
<article class="max-w-5xl mx-auto px-3">
  <header class="mx-auto max-w-3xl text-center content">
    <h1>{title}</h1>
    <div class="info-block">
        <span class="views">{views}</span>
        <span class="date">{dayjs(date).startOf("day").format("YYYY-MM-DD")}</span>
        <span class="author">{author}</span>
    </div>
  </header>
  <br/>

  <!-- Image -->
  {hero && <img class="rounded-xl mx-auto" style="min-width: 80%;" loading="lazy" src={hero} alt={title} />}

  <!-- Content -->
  <section class="max-w-3xl mx-auto py-6 lg:py-12 content">
    <article set:html={contentView}/>
  </section>
  
    <!-- <html>
      {content}
    </html> -->
  <!-- <Demo content={content} /> -->

  <EmailSignup />
</article>

<style>
  @import 'prismjs/themes/prism.css';

.info-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.info-block > span {
  margin: 0 12px;
  font-size: 14px;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.icon {
  margin-top: 24px;
  margin-bottom: 12px;
}


.views::before {
  content: "👀";
  margin-right: 4px;
}

.date::before {
  content: "📅";
  margin-right: 4px;
}

.author::before {
  content: "🧑‍💼";
  margin-right: 4px;
}

</style>
